<template>
  <transition name="fade" >

  <div class="comment-card__wrap">
    <div class="comment-card1"  v-if="type!=='dynamic'">
      <div class="comment-card1__l">
        <yun-avatar :userId="info.userId" :src="info.userAvatar"></yun-avatar>

      </div>
      <div class="comment-card1__r">
        <div class="header">
          <h6>{{info.userNick}}</h6>
          <p class="abs1" v-if="info.replyStatus===1||solved===true">已采纳</p>
          <p class="abs2" @click="dataPostToSolve" v-if="info.replyStatus===0&&questionUser===$store.state.userProfile.userId">采纳该回答</p>

          <!--          <p>{{floor}}楼</p>-->
        </div>
        <p class="comment-box" v-if="type!=='question'">{{info.comment}}</p>
        <p class="comment-box" v-if="type==='question'" v-html="returnReplyHtml"></p>
        <div class="footer">
          <h6>{{dateConvert2}}</h6>
          <p>
            <span v-if="totalRecords" @click="showCommentInput=!showCommentInput">回复({{totalRecords}})</span>
            <span v-if="!totalRecords" @click="showCommentInput=!showCommentInput">回复</span>
<!--            <span :class="returnlikeWordClass" @click="clickToPraise">赞({{praiseNum}})</span>-->
            <span @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span>
          </p>
        </div>
        <transition name="fade" >
          <auto-textarea
                         v-if="showCommentInput"
                         fontSize="14px"
                         minHeight="66px"
                         style=" border:1px solid #EFEFEF;width:100%; background-color: #F4F8FA; border-radius:4px;"
                         lineHeight="1.5" v-model="commentContent"
                         backgroundColor="#F4F8FA"

          ></auto-textarea>
        </transition>
        <transition name="fade" >
        <div class="button-box" v-if="showCommentInput">
          <p @click="dataPostComment1">评论</p>
        </div>
        </transition>
        <card2 @listenCommentReget2="dataGetComment" :type="type" :id="id" v-for="(val,index) in commentList" :key="val.commentId" :info="val"></card2>
        <p class="comment-more" @click="clickToGetMore" v-if="currentPage<pages">查看更多</p>
      </div>

    </div>
    <div class="comment-card1-dynamic" v-if="type==='dynamic'">
      <div class="comment-card1__l">
        <yun-avatar :userId="info.userId" :src="info.userAvatar"></yun-avatar>
        <p class="abs1" v-if="info.replyStatus===1||solved===true">已采纳</p>
        <p class="abs2" @click="dataPostToSolve" v-if="info.replyStatus===0&&questionUser===$store.state.userProfile.userId">采纳</p>
      </div>
      <div class="comment-card1__r">
        <div class="header">
          <h6>{{info.userNick}}</h6>
<!--          <p>{{floor}}楼</p>-->
        </div>
        <p class="comment-box" v-if="type!=='question'">{{info.comment}}</p>
        <p class="comment-box" v-if="type==='question'">{{info.reply}}</p>
        <div class="footer">
          <h6>{{dateConvert2}}</h6>
          <p>
            <span v-if="totalRecords" @click="showCommentInput=!showCommentInput">回复({{totalRecords}})</span>
            <span v-if="!totalRecords" @click="showCommentInput=!showCommentInput">回复</span>
<!--            <span>赞{{likeNum}}</span>-->
            <span @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span>
          </p>
        </div>
        <transition name="fade" >
          <auto-textarea
            v-if="showCommentInput"
            fontSize="14px"
            minHeight="66px"
            style=" border:1px solid #EFEFEF;width:100%; background-color: #F4F8FA; border-radius:4px;"
            lineHeight="1.5" v-model="commentContent"
            backgroundColor="#F4F8FA"

          ></auto-textarea>
        </transition>
        <transition name="fade" >
          <div class="button-box" v-if="showCommentInput">
            <p @click="dataPostComment1">评论</p>
          </div>
        </transition>
        <card2 @listenCommentReget2="dataGetComment" :type="type" :id="id" v-for="(val,index) in commentList" :key="val.commentId" :info="val"></card2>
        <p class="comment-more" @click="clickToGetMore" v-if="currentPage<pages">查看更多</p>
      </div>

    </div>
  </div>
  </transition>
</template>


<script>
  import config from '../../../action/config'
  import AutoTextarea from "../../common/auto-textarea/src/main";

  import {dateConvert} from "../../../action/utils/dataConvert";
  import Card2 from './commentCard2'
  export default {
    name:'commentCard',

    props:{
      info:{
        type:Object,
        default:()=>({})
      },
      id:{
        type:[String,Number],
        default:''
      },
      questionUser:{
        type:String,
        default:'',
      },
      type:String
    },


    computed:{
      dateConvert2(){
        return dateConvert(this.info.createTime)
      },
      returnlikeWordClass(){
        return this.praised?'likeActive':'like'
      },

      returnReplyHtml(){
        let html = this.info.reply;
        let reg = /<[^>]+>/g;
        let str = html.replace(/<\/?(?!img\b|br\b)\w+\b[^<>]*>/g,"");
        return str
      }

    },


    components:{
      Card2,AutoTextarea
    },
    data(){

      //return
      return {
        commentList:[],
        showCommentInput:false,
        commentContent:'',
        floor:'',
        likeNum:'',
        solved:false,
        currentPage:1,
        pages:1,
        totalRecords:0,
        praised:false,
        praiseNum:0,
      }
    },

    created(){
      this.dataGetComment();
    },
    watch:{
      currentPage(){
        this.dataGetComment()
      }
    },
    methods:{

      dataPostComment1(){
        if(!this.$store.state.auth.token){
          this.$message({
            type:'warning',
            message:'请在登录后评论!'
          });
          return false;
        }
        if(!this.commentContent){
          this.$message({
            type:'warning',
            message:'请输入评论内容!'
          });
          return false;
        }

        let url;
        let postData = {
          comment:this.commentContent,
        };
        this.currentPage = 1;

        if(this.type === 'blog'){
          url = config.api.post.BlogComment.release+this.id.toString()+'/comment';
          postData.parentId = this.info.commentId;
        }
        if(this.type === 'project'){
          url = config.api.post.ProjectComment.release+this.id.toString()+'/comment';
          postData.parentId = this.info.commentId;
        }
        if(this.type === 'dynamic'){
          url = config.api.post.PostComment.release+this.id.toString()+'/comment';
          postData.parentId = this.info.commentId;
        }

        if(this.type === 'question'){
          url = config.api.post.QuestionReplyComment.release+this.info.replyId.toString()+'/comment';
        }

        this.$axios.$post(url,postData).then((response)=>{
          if(response.code===0){
            this.commentContent='';
            this.showCommentInput=false;
            this.dataGetComment();
            this.$message({
              type:'success',
              message:'评论发表成功!'
            })
          }else{
            this.$message({
              type:'warning',
              message:'评论发表失败!'
            })
          }


        })
      },
      dataGetComment(){
        if(!this.id){
          return false
        }
        let url;
        let params = {
          page:this.currentPage,
          size:6
        }
        if(this.type === 'blog'){
          url = config.api.get.BlogComment.list+this.id.toString()+'/comments';
          params.parent_id = this.info.commentId;

        }
        if(this.type === 'project'){
          url = config.api.get.ProjectComment.list+this.id.toString()+'/comments';
          params.parentId = this.info.commentId;

        }

        if(this.type === 'dynamic'){
          url = config.api.get.PostComment.list+this.id.toString()+'/comments';
          params.parent_id = this.info.commentId;
        }
        if(this.type === 'question'){
          url = config.api.get.QuestionReplyComment.list+this.info.replyId+'/comments';
        }
        this.$axios.$get(url,{
          params
        }).then((response)=>{
          if(response.code===0){
            if(this.currentPage===1){
              this.commentList = response.data.dataList;
              this.pages  = response.data.totalPage;
              this.totalRecords = response.data.totalRecords;
            }else{
              let list = response.data.dataList;
              for(let i = 0;i<list.length;i++){
                this.commentList.push(list[i]);
              }
              this.pages  = response.data.totalPage;
              this.totalRecords = response.data.totalRecords;
            }
          }
        })
      },
      dataDeleteComment(){
        if(!this.$store.state.auth.token){
          this.$message({
            type:'warning',
            message:'请在登录后操作!'
          });
          return false;
        }
        let url;
        if(this.type === 'blog'){
          url = config.api.delete.BlogComment.delete+this.info.commentId
        }
        if(this.type === 'project'){
          url = config.api.delete.ProjectComment.delete+this.info.commentId
        }
        if(this.type === 'dynamic'){
          url = config.api.delete.PostComment.delete+this.info.commentId
        }
        if(this.type === 'question'){
          url = config.api.delete.QuestionReply.delete+this.info.replyId;
        }

        this.$axios.$delete(url).then((response)=>{
          if(response.code===0){
            this.$emit(config.event.listenCommentReget1,1)
            this.$message({
              type:'success',
              message:'删除成功!'
            });
          }else{
            this.$message({
              type:'warning',
              message:'删除失败!'
            });
          }
        })
      },
      dataPostToSolve(){
        this.$axios.$put(config.api.put.QuestionReply.adopt+this.info.replyId+'/adoption'+'?questionId='+this.info.questionId).then((response)=>{
          if(response.code===0){
            this.solved = true;
            this.$message({
              type:'success',
              message:'采纳成功!'
            })
            this.$router.go(0);
          }else{
            this.$message({
              type:'warning',
              message:'采纳失败!'
            })
          }
        })

      },
      clickToGetMore(){
        if(this.currentPage<this.pages){
          this.currentPage = this.currentPage+1;
        }else{

        }
      },
      clickToPraise(){
        if(this.praised){
          this.dataDeletePraise();
        }else{
          this.dataPostPraise()
        }

      },
      dataPostPraise(){
        this.$axios.$post(config.api.post.QuestionPraise.replyPraise+this.info.replyId+'/praise').then((response)=>{

          if(response.code===0){
            this.$message({
              type:'success',
              message:'点赞成功'
            })
            this.praised = true;
            this.praiseNum = this.praiseNum +1;
          }else if(response.code===1000){
            this.$message({
              type:'warning',
              message:'请在登陆后操作'
            })
          }
        })

      },
      dataDeletePraise(){
        this.$axios.$delete(config.api.delete.QuestionPraise.replyPraise+this.info.replyId+'/praise').then((response)=>{
          if(response.code===0){
            this.$message({
              type:'success',
              message:'取消点赞'
            })
            this.praised = false;
            this.praiseNum = this.praiseNum -1;
          }else if(response.code===1000){
            this.$message({
              type:'warning',
              message:'请在登陆后操作'
            })
          }
        })
      }

    }


  }

</script>




<style lang="scss" scoped>

    .comment-card1{
      box-sizing:content-box;
      padding:21*$length 24*$length 24*$length;
      width:890*$length;
      border-bottom:1px dashed #EFEFEF;
      @extend %flex-row-spb;
      align-items: flex-start;
      background-color: #fff;
      .comment-card1__l{
        width:48*$length;
        position:relative;

      }
      .comment-card1__r{
        width:826*$length;
        position:relative;

        .header{
          @extend %flex-row-spb;
          h6{
            @include fontStyle(14,19,500,#666,left)
          }
          p{
            @include fontStyle(12,16,500,#999,left)
          }
          .abs1{
            @extend %cursorPointer;
            position: absolute;
            top:0*$length;
            right:0*$length;
            @include fontStyle(12,19,500,#75D098,left);
          }
          .abs2{
            @extend %cursorPointer;

            position: absolute;
            top:0*$length;
            right:0*$length;
            @include fontStyle(12,19,500,#909399,left);
          }
        }

        .comment-box{
          margin-top:15*$length;
          @include fontStyle(14,24,500,#333,left);
          height:auto;
        }

        .footer{
          margin:12*$length 0;
          @extend %flex-row-spb;

          h6{
            @include fontStyle(12,16,500,#999,start)
          }
          p{
            @include fontStyle(12,16,500,#999,start);

            .like{
              &:hover{
                color:#00AAE6;
              }
            }
            .likeActive{
              color: #00AAE6;
            }
            span{
              margin-left:20*$length;
              @extend %cursorPointer;
              @extend %animate-transition;
              &:hover{
                color:#00AAE6;
              }

            }
          }
        }
      }
    }

    .comment-card1-dynamic{
      box-sizing:content-box;
      padding:21*$length 24*$length 24*$length;
      width:768*$length;
      border-bottom:1px dashed #EFEFEF;
      @extend %flex-row-spb;
      align-items: flex-start;
      background-color: #fff;
      .comment-card1__l{
        width:48*$length;
        position:relative;
        .abs1{
          @extend %cursorPointer;
          position: absolute;
          top:58*$length;
          left:5*$length;
          @include fontStyle(12,19,500,#75D098,left);
        }
        .abs2{
          @extend %cursorPointer;

          position: absolute;
          top:58*$length;
          left:10*$length;
          @include fontStyle(12,19,500,#909399,left);
        }
      }
      .comment-card1__r{
        width:700*$length;
        .header{
          @extend %flex-row-spb;
          h6{
            @include fontStyle(14,19,500,#666,left)
          }
          p{
            @include fontStyle(12,16,500,#999,left)
          }
        }

        .comment-box{
          margin-top:15*$length;
          @include fontStyle(14,24,500,#333,left);
          height:auto;
        }

        .footer{
          margin:12*$length 0;
          @extend %flex-row-spb;

          h6{
            @include fontStyle(12,16,500,#999,start)
          }
          p{
            @include fontStyle(12,16,500,#999,start);
            span{
              margin-left:20*$length;
              @extend %cursorPointer;
              @extend %animate-transition;
              &:hover{
                color:#00AAE6;
              }

            }
          }
        }
      }
    }

    .release-area{
      width:100%;
      padding:14*$length 16*$length;
      background-color: #F4F8FA;
      border:1px solid #EFEFEF;
      border-radius:4*$length;
      @include fontStyle(12,22,500,#666666,left);
      height:66*$length;

    }

    .button-box{
      height:34*$length;
      @extend %flex-row-spb;
      justify-content: flex-end;
      margin-top: 16*$length;
      margin-bottom: 16*$length;

      p{
        width:100*$length;
        background-color: #00AAE6;
        border-radius: 4*$length;
        @include fontStyle(12,34,500,#fff,center);
        @extend %cursorPointer;
        @extend %animate-transition;
        &:hover{
          filter: brightness(110%);
        }


      }

    }

    .comment-more{
      @include fontStyle(12,78,500,#A7A7A7,center);
      background-color: #F4F8FA;
      @extend %cursorPointer;
      @extend %animate-transition;
      border-bottom-left-radius: 4*$length;
      border-bottom-right-radius: 4*$length;
      &:hover{
        color:#00AAE6;
      }
    }
</style>
